<template>
	<view class="jifen">
		<div class="jifen-shang">
			<div class="jifen-shang-left">
				<div class="shang-left-shang">
					<p>可用积分</p>
					<h1>22</h1>
				</div>
				<div class="shang-left-xia">
					<p>积分明细 | 兑换记录</p>
				</div>
			</div>
			<div class="jifen-shang-right">
				<img src="../../static/img/5.png" alt="">
			</div>
		</div>
		<div class="jifen-zhong"></div>
		<ul class="jifen-xia">
			<li>
				<img src="../../static/img/6.png" alt="">
				<h1>外卖买二赠一卷</h1>
				<p><span>1800</span>积分</p>
			</li>
			<li>
				<img src="../../static/img/6.png" alt="">
				<h1>外卖波波家族卷</h1>
				<p><span>2800</span>积分</p>
			</li>
			<li>
				<img src="../../static/img/6.png" alt="">
				<h1>外卖买一赠一卷</h1>
				<p><span>2800</span>积分</p>
			</li>
			<li>
				<img src="../../static/img/6.png" alt="">
				<h1>外卖咖啡卷</h1>
				<p><span>2900</span>积分</p>
			</li>
		</ul>
		<div class="jifen-bottom">
			<p>没有更多了</p>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scopet>
.jifen{
	width: 100vw;
	height: 100vh;
	background: #fff;
}
.jifen-shang{
	width: 90%;
	height: 180px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jifen-shang-left{
	width: 50%;
	height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.shang-left-shang{
	width: 100%;
	height: 60px;
}
.shang-left-shang p{
	font-size: 15px;
	line-height: 20px;
}
.shang-left-shang h1{
	font-size: 25px;
	line-height: 40px;
	font-weight: 600;
}
.shang-left-xia{
	width: 100%;
	height: 50px;
}
.shang-left-xia p{
	font-size: 15px;
}
.jifen-shang-right{
	width: 50%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.jifen-shang-right img{
	width: 100px;
	height: 100px;
}
.jifen-zhong{
	width: 100%;
	height: 5px;
	background: rgb(242, 242, 242);
}
.jifen-bottom{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.jifen-xia{
	width: 90%;
	height: calc(100% - 235px);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.jifen-xia li{
	width: 45%;
	height: 40%;
	margin-top: 5%;
}
.jifen-xia li img{
	width: 100%;
	height: 80px;
	background: red;
}
.jifen-xia li h1{
	font-size: 16px;
	line-height: 30px;
}
.jifen-xia li p{
	font-size: 12px;
	color: rgb(170, 170, 170);
}
.jifen-xia>li>p>span{
	font-size: 15px;
	color: red;
	margin-right: 5px;
}
</style>
